<template>
  <div class="box">
      <div>
        <div class="bgc">
          <div class="sprite-sheet"></div>
          <div class="turnover-time">更新日期:03月04日</div>
        </div>
      </div>
      
          <song-list :list="list" mode = 'rank' />
    
            <!-- <div v-for="(item, idx) in SongList" :key="item.id">
              <template> 
                  <div :style="idx < 3 ? 'color:#df3436' : '' ">
                    {{9 > idx ? ('0' + (idx + 1)) : idx + 1}}
                  </div>
              </template>  
                <van-cell :title="item.name" class="song" :label="`${item.ar[0].name} -- ${item.name}`">
                <template #right-icon>
                    <van-icon name="play-circle-o" icon=""/>                  
                </template>
                </van-cell>
            </div> -->
    </div>
</template>

<script>
// import evetBus from '../../../../event-bus/index'
import { mapState, mapActions } from 'vuex'
export default {
  computed : {
        // 模板名， 字段数组
        ...mapState('hotSong', ['info']),
        list () {
          return this.info.playlist?.tracks
              .slice(0, 20)
              .map((item, i) => ({
                id:item.id,
                name:item.name,
                maxBr:this.info.privileges[i].downloadMaxbr,
                alias:item.alia[0],
                artists:item.ar,
                albumName:item.al.name,
              }))
        }
    // SongList () {
    //   if (!evetBus.hotSongList) {
    //     return []
    //   }
    //   return evetBus.hotSongList.playlist.tracks
    // }
  },
  methods:{
    ...mapActions('hotSong', ['updateInfo'])
  },
  created () {
    this.updateInfo()
  }
  // created () {
  //   evetBus.$emit('updateHotSongList')
  // }
  
}
</script>

<style scoped>
.song {
  font-size: 20px;
}
  .bgc {
    width: 100%;
    height: 145px;
    position: relative;
    background-image: url('https://s3.music.126.net/mobile-new/img/hot_music_bg_2x.jpg?f01a252389c26bcf016816242eaa6aee=');
    background-size: contain;
  }
  .sprite-sheet {
    margin-top: 25px;
    margin-left: 20px;
    width: 142px;
    height: 67px;
    position:absolute;
    background: url('https://s3.music.126.net/mobile-new/img/index_icon_2x.png?5207a28c3767992ca4bb6d4887c74880=') no-repeat -20px -28px;
    background-size: 160px 95px;
    z-index: 99;
  }
  .turnover-time {
    position: relative;
    top: 100px;
    left: 20px;
  }
  .box {
    width: 100%;
    flex:1;
  }
</style>

